<template>
    <view class="feedback-con">

        <!-- 内容区域 -->
        <view class="scroll-area">
            <!-- 反馈内容 -->
            <view class="card">
                <view class="card-title">
                    <u-image :src="IMAGE_URL + '/static/mine/title-icon.png'" width="33rpx" height="24rpx" mode="aspectFill"></u-image>
                    <text class="tit">反馈内容</text>
                </view>
                <view class="card-body">
                        <view class="textarea">{{ form.content }}</view>

                        <view class="uploader">
                            <view class="thumb" v-for="(img, idx) in images" :key="idx">
                                <u-image :src="img.path" mode="aspectFill" class="thumb-img"></u-image>
                            </view>
                        </view>
                </view>
            </view>

            <!-- 联系方式 -->
            <view class="phone-card">
                <view class="card-title">
                    <u-image :src="IMAGE_URL + '/static/mine/title-icon.png'" width="33rpx" height="24rpx" mode="aspectFill"></u-image>
                    <text class="tit">联系方式</text>
                </view>
                <view class="card-body">
                    {{ form.contact }}
                </view>
            </view>

             <!-- 联系方式 -->
             <view class="phone-card">
                <view class="card-title">
                    <u-image :src="IMAGE_URL + '/static/mine/title-icon.png'" width="33rpx" height="24rpx" mode="aspectFill"></u-image>
                    <text class="tit">反馈回复</text>
                </view>
                <view class="card-body">
                    111111111111
                </view>
            </view>
        </view>
    </view>
</template>
<script>
import headerVue from '@/components/header.vue';
import appConfig from '@/config/app.js'
export default {
    components: {
        headerVue,
    },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            form: {
                content: '',
                contact: ''
            },
            images: [],
            maxImages: 9
        }
    },
    methods: {
        gotoUrl(url){
            uni.navigateTo({url: url})
        },
        mockFetchDetail(id) {
            // 模拟详情数据
            const imgSamples = [
                'https://cdn.uviewui.com/uview/swiper/1.jpg',
                'https://cdn.uviewui.com/uview/swiper/2.jpg',
                'https://cdn.uviewui.com/uview/swiper/3.jpg'
            ]
            const count = (id % 3) + 1
            return {
                content: '在 “个人中心” 页面，点击 “编辑资料” 时偶尔会出现点击没有响应的情况以及点击后需要长时间等待。',
                contact: '13800001234',
                images: imgSamples.slice(0, count).map(url => ({ path: url }))
            }
        }
    },
    onLoad(options) {
        const id = Number(options?.id || 1)
        const detail = this.mockFetchDetail(id)
        this.form.content = detail.content
        this.form.contact = detail.contact
        this.images = detail.images
    }
}
</script>
<style lang="scss" scoped>
.feedback-con {
    width: 100%;
    min-height: 100vh;
    background: #F6F6F6;
}

.btn-lt {
    display: flex;
    align-items: center;
    color: #999;

    .txt {
        font-size: 24rpx;
        margin-left: 4rpx;
    }
}

.scroll-area {
    height: calc(100% - 88rpx);
    padding: 24rpx;
    box-sizing: border-box;
}

.card {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    margin-bottom: 24rpx;
    padding-bottom: 48rpx;
}

.card-title {
    display: flex;
    align-items: center;
    padding: 20rpx 28rpx 0;
    font-size: 30rpx;
    color: #333;
    font-weight: 600;

    .tit {
        margin-left: 8rpx;
    }
}

.card-body {
    margin: 26rpx 28rpx;
    background: #FAFAFA;
    border-radius: 12rpx 12rpx 12rpx 12rpx;

    .textarea {
        background: transparent;
        font-size: 24rpx;
        color: #666666;
        padding: 20rpx;
        box-sizing: border-box;
    }
}


.phone-card {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
    padding-bottom: 10rpx;
    margin-bottom: 28rpx;

    .card-body {
        background: transparent;
        margin: 30rpx 20rpx 0;
        font-size: 28rpx;
        color: #333333;
    }
}

.upload-wrap {
    padding: 20rpx;
}

.upload-btn {
    width: 124rpx;
    height: 140rpx;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1rpx solid #999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #333;

    .iconfont {
        font-size: 20rpx;
        color: #333;
        margin-bottom: 8rpx;
    }
}

.submit-wrap {
    height: 80rpx;
    border-radius: 80rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36rpx;
    color: #FFFFFF;
    margin-top: 100rpx;
}

/* 图片上传样式，与发布动态一致 */
.uploader {
    display: flex;
    flex-wrap: wrap;
    margin-top: 24rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}
.thumb {
    position: relative;
    width: 120rpx;
    height: 140rpx;
    border-radius: 4rpx;
    overflow: hidden;
    margin-right: 25rpx;
    margin-bottom: 20rpx;
}
.thumb:nth-child(4n) {
    margin-right: 0;
}
.thumb-img {
    width: 100%;
    height: 100%;
    display: block;
}
.thumb-del {
    position: absolute;
    right: 6rpx;
    top: 6rpx;
    width: 20rpx;
    height: 20rpx;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 50%;
    font-size: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.add-tile {
    width: 120rpx;
    height: 140rpx;
    border-radius: 4rpx;
    background: #F8F8F8;
    border: 2rpx dashed #ddd;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #999;
    margin-bottom: 20rpx;
}
.camera-icon {
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12rpx;
}
.add-text {
    font-size: 24rpx;
    color: #999;
}
</style>